.container {
    width: 100%;
    padding: 10px 16px;
    display: flex;
    justify-content: center;

    &:global(.in) {
        padding: 0;
    }

    > .img {
        margin-top: 112px;
        position: relative;
        cursor: zoom-in;

        &:global(.width) {
            width: var(--width-);
            max-height: 20rem;

            > img {
                width: 100%;
                height: 100%;
            }
        }

        &:global(.height) {
            height: 20rem;

            > img {
                height: 100%;
            }
        }

        &:global(.equal) {
            height: 20rem;

            > img {
                height: 100%;
            }
        }

        &:global(.in) {
            width: 100%;
            padding: 0;
            cursor: zoom-out;

            > img {
                width: 100%;
            }
        }

        &:hover {
            > .icon {
                opacity: 1;
            }
        }

        > .icon {
            color: #ffffff;
            font-size: 24px;
            position: absolute;
            right: 16px;
            top: 16px;
            opacity: 0;
            transition: all 0.2s ease;
        }
    }
}
